<template>
  <div>
    <top-label v-model="index">
      <span :slot="0">在线监测</span>
      <span :slot="1">人工与在线监测比对</span>
      <span :slot="2">数据统计</span>
      <span :slot="3">监测设备运行状态统计</span>
      <span :slot="4">预警日志</span>
    </top-label>
    <el-row>
      <online-monitor v-if="index === 0"></online-monitor>
      <data-statistics-chart v-if="index === 1"></data-statistics-chart>
      <data-statistics v-if="index === 2"></data-statistics>
      <sensor-state-total v-if="index === 3"></sensor-state-total>
      <log v-if="index === 4"></log>
    </el-row>
  </div>
</template>

<script>
import OnlineMonitor from "./monitor-management/OnlineMonitor";
import DataStatisticsChart from "./monitor-management/DataStatisticsChart";
import DataStatistics from "./monitor-management/DataStatistics";
import SensorStateTotal from "./monitor-management/SensorStateTotal";
import Log from "./monitor-management/Log";
import TopLabel from "../../components/TopLabel";
export default {
  name: "MonitorManagement",
  components: {
    OnlineMonitor,
    DataStatisticsChart,
    DataStatistics,
    SensorStateTotal,
    Log,
    TopLabel,
  },

  data() {
    return {
      index: 0,
    };
  },
  created() {
    if (window.sessionStorage.getItem("indexsu") != null) {
      this.index = Number(window.sessionStorage.getItem("indexsu"));
    }
    
  },
  watch: {
    index: function (indexra, oldVal) {
      window.sessionStorage.setItem("indexsu", indexra);
      // console.log(val);
    },
  },
};
</script>

<style scoped>
.row {
  margin-left: 0.075rem;
}
</style>